<template>
    <div>
        <BreadCrumb name1="商品管理" name2="商品列表"></BreadCrumb>
        <el-card>
            <el-row>
                <el-col :span="6">
                    <el-input placeholder="请输入内容" v-model="getAllParams.query">
                        <el-button slot="append" icon="el-icon-search" @click="SearchGoodsList"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="$router.push('/addgoods')">添加商品</el-button>
                </el-col>
            </el-row>
            <el-table border :data="goodsList" style="width: 100%;margin:10px 0;">
                <el-table-column type="index" label="#"></el-table-column>
                <el-table-column prop="goods_name" label="商品名称" width="500"></el-table-column>
                <el-table-column prop="goods_price" label="价格(元)" width="80"></el-table-column>
                <el-table-column prop="goods_weight" label="商品重量" width="80"></el-table-column>
                <el-table-column prop="add_time" label="创建时间"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scoped">
                        <!-- <p>{{scoped.row}}</p> -->
                        <el-button type="primary" size="mini" icon="el-icon-edit" @click="showUpdateDialog(scoped.row)"></el-button>
                        <el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteShopInfo(scoped.row)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="getAllParams.pagenum" :page-sizes="[5, 10, 15, 20]" :page-size="getAllParams.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
            <!-- 编辑商品列表对话框 -->
            <el-dialog title="编辑" :visible.sync="UpdateDialogVisible" width="30%">
                <el-form ref="UpdateForm" :rules="FormRules" :model="UpdateForm" label-width="80px">
                    <el-form-item label="商品名称" prop="goods_name">
                        <el-input v-model="UpdateForm.goods_name"></el-input>
                    </el-form-item>
                    <el-form-item label="商品价格" prop="goods_price">
                        <el-input v-model="UpdateForm.goods_price"></el-input>
                    </el-form-item>
                    <el-form-item label="商品数量" prop="goods_number">
                        <el-input v-model="UpdateForm.goods_number"></el-input>
                    </el-form-item>
                    <el-form-item label="商品重量" prop="goods_weight">
                        <el-input v-model="UpdateForm.goods_weight"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="UpdateDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="UpdateGoodsInfo">确 定</el-button>
                </span>
            </el-dialog>
        </el-card>
    </div>
</template>

<script>
import BreadCrumb from '@/components/BreadCrumb';
import {Get_AllGoodsListData,Get_OneGoodsListData,Update_GoodsListData,Delete_GoodsListData} from '@/api/goods.js';
    export default {
        data(){
            return{
                getAllParams:{//获取所有商品列表数据参数
                    query:'',
                    pagesize:5,//一页几条数据
                    pagenum:1//几页
                },
                goodsList:[],
                total:0,//存放数据总条数
                UpdateDialogVisible:false,//控制编辑商品列表对话框的显示隐藏
                UpdateForm:{},//存放get获取单个元素的数据
                FormRules:{
                    goods_name:[
                        { required: true, message: '请输入商品名称', trigger: 'blur' }
                    ],
                    goods_price:[
                        { required: true, message: '请输入商品价格', trigger: 'blur' }
                    ],
                    goods_number:[
                        { required: true, message: '请输入商品数量', trigger: 'blur' }
                    ],
                    goods_weight:[
                        { required: true, message: '请输入商品重量', trigger: 'blur' }
                    ]
                }
            }
        },
        components:{
            BreadCrumb
        },
        mounted(){
            this.getGoodsList();
        },
        methods:{
            // 获取所有商品列表
            async getGoodsList(){
                const result = await Get_AllGoodsListData(this.getAllParams);
                if(result.meta.status != 200){
                    return this.$message.error('获取失败')
                }
                console.log(result);
                this.goodsList = result.data.goods;
                this.goodsList.forEach((item)=>{
                    item.add_time = this.$moment(item.add_time).format("YYYY-MM-DD,hh:mm:ss") 
                })
                console.log(this.goodsList);
                this.total = result.data.total;
            },
            // 监听分页每页条数变化
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.getAllParams.pagesize = val;
                this.getGoodsList();
            },
            // 监听分页当前第几页变化
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.getAllParams.pagenum = val;
                this.getGoodsList();
            },
            // 点击显示编辑对话框
            async showUpdateDialog(info){
                const result = await Get_OneGoodsListData(info.goods_id)
                console.log(result);
                if(result.meta.status != 200){
                    return this.$message.error('获取失败')
                }
                this.UpdateForm = result.data;
                this.UpdateDialogVisible = true;
            },
            // 编辑商品列表
            UpdateGoodsInfo(){
                this.$refs.UpdateForm.validate(async (valid)=>{
                    if(valid){
                        const result = await Update_GoodsListData({
                            method:'put',
                            url:`goods/${this.UpdateForm.goods_id}`,
                            data:this.UpdateForm
                        });
                        console.log(result);
                        if(result.meta.status != 200){
                            return this.$message.error('修改失败')
                        }
                        this.$message.success('修改成功');
                        this.UpdateDialogVisible = false;
                        this.getGoodsList();
                    }
                })
            },
            // 查询商品列表
            SearchGoodsList(){
                this.getGoodsList();
                this.getAllParams.query = '';
            },
            async deleteShopInfo(info){
                const confirmResult = await this.$confirm('此操作将永久删除该用户信息，是否继续？','提示',{//弹出确认框
                    confirmButtonText:'确定',//确认按钮文字
                    cancelButtonText:'取消'//取消按钮文字
                }).catch(err=>err);//catch获取错误信息
                if(confirmResult == 'confirm'){
                    const result = await Delete_GoodsListData(info.goods_id);
                    if(result.meta.status != 200){
                        return this.$message.error('删除失败')
                    }
                    this.$message.success('删除成功');
                    this.getGoodsList();
                }
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>